<template>
  <div class="count">
    <h1>{{ count }} </h1>
    <h2>id:{{ id }}</h2>
    <button @click="add(num)">点我累加</button>
    
  </div>
</template>

<script>
export default {
  name: "Count",
  data(){
    return{
      count:0
    }
  },
  methods:{
    add(num){
      this.count+=num
    },
    
  },
  //方式1  只指定名称
  // props:["num"]

  //方式2 指定名称和类型
  // props:{
  //   num:Number
  // }

  //方式3 做更多的限制
  props: {
    num: {
      type: Number,//接受的参数的number类型
    },
    id: {
      type: String,//id的类型
      required: true,//是否必填
      default: Date.now(),//默认值
    },
  },
};
</script>

<style scoped>
.count {
  background: yellow;
  height: 100px;
}
</style>